<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>NIKE SB</title>
    <style>
        body {
/*             background-color: black; */
        }

        .video1 {
            display: block;
            margin: 0 auto;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 100%;
            transform: translate(-50%, -50%);
        }

        .topbox,
        .main {
            display: none;
        }

        .topbox {
            /* 画板 1 */
            position: absolute;
            width: 100%;
            height: 100px;
            left: 0%;
            right: 0%;
            top: 0%;
            background: rgb(247, 247, 247);
            display: none;
            justify-content: center;
            align-items: center;
        }

        .nike {
            /* svg */
            position: absolute;
            width: 100px;
            height: 100px;
            left: 2.79%;
            top: 0%;
        }

        .user {
            /* 组合 1 */
            position: absolute;
            width: 264px;
            height: 60px;
            right: 2.79%;
        }

        .main {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0%;
            right: 0%;
            top: 0%;
            /* background: rgb(247, 247, 247); */
            display: none;
            justify-content: center;
            align-items: center;
        }

        .goods {
            /* 画板 2 */
            position: absolute;
            width: 430px;
            height: 219px;
            top: 102px;
        }

        .word {
            /* 组合 2 */
            position: absolute;
            width: 210px;
            height: 185px;
            top: 364px;
        }

        .go {
            /* 去Nike 耐克看看 */
            position: absolute;
            width: 104px;
            height: 14.08px;
            top: 427.49px;
        }
    </style>
</head>

<body>
    <div class="topbox">
        <img src="https://creation.bcmcdn.com/716/appcraft/IMAGE_W2-UGkz6m2_1746160694449.svg" alt="Nike" class="nike">
        <img src="user.svg" alt="yuanruiqiang2022@163.com" class="user">
    </div>
    <div class="main">
        <img src="https://creation.bcmcdn.com/716/appcraft/IMAGE_SV83DPZjRZ_1746160694447.svg" alt="Nike SB" class="goods">
        <img src="word.svg" alt="Nike Dunk SB Pro acg " class="word">
        <img id="goImg" src="https://creation.bcmcdn.com/716/appcraft/IMAGE_hlnGcNrGR_1746160694419.svg" alt="Nike app" class="go">
    </div>

    <video class="video1" onended="showContent()" muted autoplay preload x5-video-player-fullscreen="true" x5-playsinline playsinline
        webkit-playsinline>
        <source src="https://gitee.com/yuanruiqiang/uni_static_yrq/raw/master/1.mov" type="video/mp4">
    </video>

    <script>
        function showContent() {
            document.querySelector('.topbox').style.display = 'flex';
            document.querySelector('.main').style.display = 'flex';
         	document.querySelector('.video1').style.display='none'
        }

        const goImg = document.getElementById('goImg');
        goImg.addEventListener('click', function () {
            window.location.href = 'https://www.nike.com/';
        });
    </script>
</body>

</html>
    